<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的基本使用</title>
    <script src="../../JS/vue.js"></script>
  </head>
  <body>
    <!-- 
        事件的基本使用
            1、使用v-on:xxx 或 @xxx 绑定事件，其中xxx
            事件名；
            2、事件的回调需要配置在methods对想象中。最终会在vm上；
            3、methods中配置的函数，不要用箭头函数！否则this就不是vmle;
            4、methods中配置的函数，都是被Vue所管理的函数，this的指向是Vm 或 组件爱你实例对象
            5、@click="dome" 和 @click="demo($event)"
            效果一致，但后者可以传参；
     -->
    <div id="root">
      <h2>欢迎大家来到{{name}}旅游</h2>
      <button @click="showInfo">点我提示信息!</button>
      <button @click="showInfo1(name)">点我提示信息!!</button>
      <button @click="showInfo2($event,66)">点我提示信息!!!</button>
    </div>
    <script type="text/javascript">
      Vue.config.productionTip = false //阻止vue启动提示信息
      const vm = new Vue({
        el: '#root',
        data: {
          name: '莫楼',
        },
        methods: {
          showInfo() {
            alert(`欢迎大家来到,${this.name}`)
          },
          showInfo1(name) {
            console.log(name)
          },
          showInfo2(e, num) {
            console.log(e, num)
          },
        },
      })
    </script>
  </body>
</html>
